<template>
	<div>
		<use-table ref="tbl"></use-table>
		<div class="container last_container use-table">
			<div class="dflex_vertical_c margin_b_20 table-head">
				<div class="dflex_vertical_c">
					<div class="search_name">笔记标题：</div>
					<el-input v-model="req.note_title" placeholder="请输入" class="search_input" @change="search"
						clearable></el-input>
				</div>
				<div class="dflex_vertical_c margin_l_10">
					<div class="search_name">名称：</div>
					<el-input v-model="req.create_uname" placeholder="请输入" class="search_input" @change="search"
						clearable></el-input>
				</div>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索
				</el-button>
			</div>
			<el-table ref="etbl" :height="tblHeight" v-loading="tableLoading" :data="tableDatas" highlight-current-row
				@sort-change="sortable">
				<el-table-column label="笔记" align="center">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<use-carousel :width="84" :height="84" :imgs="scope.row.note_imgs"
								:video="scope.row.note_video"></use-carousel>
							<div class="left_just margin_l_10">
								<el-popover popper-class="use_popover" :open-delay="200" :close-delay="40"
									placement="right" :title="scope.row.note_title" trigger="hover"
									:content="scope.row.note_desc || '--'">
									<div slot="reference" class="dflex_d_c">
										<div class="ellipsis crpr">{{ scope.row.note_title }}</div>
										<div class="ellipsis crpr">{{ scope.row.note_desc }}</div>
									</div>
								</el-popover>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="笔记人" align="center" width="500">
					<template slot-scope="scope">
						<div class="dflex_vertical_c">
							<el-image class="headimg_small"
								:src="scope.row.create_uheadimg || 'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'"
								:preview-src-list="scope.row.previewImgs" fit="contain"></el-image>
							<div class="margin_l_5 ellipsis_2 left_just">{{ scope.row.create_uname || '--' }}</div>
						</div>
					</template>
				</el-table-column>
				<div slot="empty">
					<el-empty description=" "></el-empty>
				</div>
			</el-table>
		</div>
	</div>
</template>

<script>
	const __name = 'wmzmall-shopping-user';
	export default {
		data() {
			return {
				dataId: '',
				tableLoading: false,
				req: {
					note_title: '',
					create_uname: ''
				},
				tblHeight: 0,
				tableDatas: [],
				searchBtnLoading: false
			};
		},
		methods: {
			async loadData(callback) {
				this.tableLoading = true;
				let notepRes = this.$db[__name]
					.collection()
					.where({
						_id: this.dataId
					})
					.getTemp();

				let ctx = this.$udb.collection(notepRes, 'wmzmall-shopping-note');

				ctx.get().then(res => {
					if (res.result.code == 0) {
						if (res.result.data[0]) {
							res.result.data[0].notep_collect.forEach((row, idx) => {
								row.previewImgs = [(row.create_uheadimg && row.create_uheadimg.replace(
										"/132", "/0")) ||
									'https://7463-tcb-rflrz31u8yan4rr9ad60d-268679-1308293149.tcb.qcloud.la/1659579992133_0.png'
								];
							});
							this.tableDatas = res.result.data[0].notep_collect;

							if (this.req.note_title) {
								this.tableDatas = this.tableDatas.filter(x => x.note_title.indexOf(this.req
									.note_title) != -1);
							}

							if (this.req.create_uname) {
								this.tableDatas = this.tableDatas.filter(x => x.create_uname.indexOf(this.req
									.create_uname) != -1);
							}
						} else {
							this.tableDatas = res.result.data;
						}

						if (typeof callback === 'function') {
							callback();
						}
					}
					this.searchBtnLoading = false;
					this.tableLoading = false;
				});
			},
			search() {
				this.searchBtnLoading = true;

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});

				uni.setStorage({
					key: '__search' + this.$route.path + '-collect',
					data: this.req
				});
			},
			sortable(column) {
				if (column.order) {
					column.order = column.order.replace('ending', '');
				}

				this.req.orderby = column.prop + ' ' + (column.order || 'desc');

				this.loadData(() => {
					this.$refs.etbl.bodyWrapper.scrollTop = 0;
				});
			}
		},
		created() {
			let __search = uni.getStorageSync('__search' + this.$route.path + '-collect');
			if (__search) {
				this.req = __search;
			}

			this.dataId = this.$route.query.id || '';
			this.loadData(() => {
				this.$nextTick(() => {
					this.$api.scrollToStorage('.el-table__body-wrapper', this.$route.path + '-collect');
				});
			});
		},
		mounted() {
			this.$nextTick(() => {
				this.$api.scrollOnStorage('.el-table__body-wrapper', this.$route.path + '-collect');
			});
		},
		updated() {
			if (!this.tblHeight) {
				this.tblHeight = this.$refs.tbl.tblHeight;
			}
		}
	};
</script>

<style>
	.ellipsis {
		max-width: 500px;
	}

	.ellipsis_2 {
		max-width: 100px;
	}
</style>
